<!--
 * @Description: 个人中心
 * @Author: HuiSir<273250950@qq.com>
 * @Date: 2021-09-24 14:56:00
 * @LastEditTime: 2025-09-03 10:46:39
-->
<template>
  <el-tabs type="card" v-model="activeTabName" class="fy-my-tabs">
    <el-tab-pane label="基本信息" name="base">
      <fy-form
        ref="fyFormRef"
        v-model="adminInfoFormData"
        labelWidth="60px"
        :disabled="getters.superAdmin"
        :inline="false"
        :options="editOptions"
        submitBtnLabel="保存"
        @submit="onSubmitBaseAdminInfo"
        @reset="resetBaseAdminInfo"
      />
    </el-tab-pane>
    <el-tab-pane label="其他资料" name="others">
      <el-form label-position="left" label-width="80px">
        <el-form-item label="用户ID">
          {{ adminInfoFormData.id }}
        </el-form-item>
        <el-form-item label="所属部门">
          {{ adminInfoFormData.dept?.name || "暂无" }}
        </el-form-item>
        <el-form-item label="所属角色">
          {{
            adminInfoFormData.roles?.map((role) => role.name).join(",") ||
            "暂无"
          }}
        </el-form-item>
        <el-form-item label="账号类型">
          {{ getters.superAdmin ? "超级" : "普通" }}管理员
        </el-form-item>
        <el-form-item label="创建时间">
          {{ adminInfoFormData.createTime }}
        </el-form-item>
        <el-form-item label="更新时间">
          {{ adminInfoFormData.updateTime }}
        </el-form-item>
        <el-form-item label="创建人">
          {{ adminInfoFormData.createUser }}
        </el-form-item>
        <el-form-item label="更新人">
          {{ adminInfoFormData.updateUser }}
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane label="修改密码" name="pass">
      <fy-form
        ref="fyResetPassFormRef"
        v-model="resetPassFormData"
        labelWidth="80px"
        :disabled="getters.superAdmin"
        :inline="false"
        :showResetBtn="false"
        :options="resetPasswordOptions"
        submitBtnLabel="保存"
        @submit="onSubmitPassword"
      />
    </el-tab-pane>
  </el-tabs>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useGetters } from "@/store";
import { IFormOption, FyFormInstance } from "@/ui";
import { ElMessage } from "element-plus";
import { useFormUploadProp } from "@/helpers/optionsMixin";
import { deepCopy } from "@/ui";
import { SexOpt } from "@/helpers/selection";
import { updateAdmin, updatePassword } from "@/api/sys";
import FyForm from "@/ui/fy/Form/index.vue";
// 配置项
defineOptions({ name: "AdminCenter", isFull: true });

const getters = useGetters();
const activeTabName = ref("base");

// 用户信息copy
const copy: AdminInfo = deepCopy(getters.copyAdminInfo);
const adminInfoFormData = ref(getters.copyAdminInfo);

// 表单ref
const fyFormRef = ref<FyFormInstance | null>(null);
const fyResetPassFormRef = ref<FyFormInstance | null>(null);

/**
 * 用户信息表单配置
 */
const editOptions: IFormOption[] = [
  {
    label: "头像",
    component: "upload",
    key: "headImg",
    props: useFormUploadProp({
      limit: 1,
      accept: "image/png,image/jpeg,image/gif,image/svg+xml",
      listType: "picture-card",
    }),
    rules: {
      required: true,
    },
  },
  {
    label: "账号",
    component: "input",
    key: "accountNo",
    rules: {
      required: true,
    },
  },
  {
    label: "名字",
    component: "input",
    key: "name",
    rules: {
      required: true,
    },
  },
  {
    label: "手机",
    component: "input",
    key: "phone",
    rules: {
      required: true,
    },
  },
  {
    label: "性别",
    component: "radio",
    key: "sex",
    options: SexOpt.options,
    rules: {
      required: true,
    },
  },
];

/**
 * 修改密码options
 */
const resetPasswordOptions: IFormOption[] = [
  {
    label: "旧密码",
    component: "input",
    key: "oldPassword",
    props: {
      placeholder: "请输入旧密码",
      type: "password",
      autocomplete: "new-password",
      showPassword: true,
    },
    rules: {
      required: true,
    },
  },
  {
    label: "新密码",
    component: "input",
    key: "newPass",
    props: {
      placeholder: "请输入新密码",
      type: "password",
      autocomplete: "new-password",
      showPassword: true,
    },
    rules: {
      required: true,
    },
  },
  {
    label: "确认密码",
    component: "input",
    key: "password",
    props: {
      placeholder: "请再次输入新密码",
      type: "password",
      autocomplete: "new-password",
      showPassword: true,
    },
    rules: {
      required: true,
    },
  },
];

// 保存用户信息
const onSubmitBaseAdminInfo = async () => {
  // 手动执行上传
  await fyFormRef.value?.uploadSubmit();

  // 表单验证
  const valid = await fyFormRef.value?.validate();
  if (!valid) return;

  const { ok, message } = await updateAdmin(adminInfoFormData.value);
  if (ok) {
    ElMessage.success(message);
  }
};

// 重置为原值
const resetBaseAdminInfo = () => {
  adminInfoFormData.value = copy;
};

// 修改密码form
const resetPassFormData = ref<Record<string, string>>({
  oldPassword: "",
  newPass: "",
  password: "",
});

// 修改密码
const onSubmitPassword = async () => {
  // 表单验证
  const valid = await fyResetPassFormRef.value?.validate();
  if (!valid) return;

  if (resetPassFormData.value.newPass !== resetPassFormData.value.password) {
    ElMessage.error("两次输入的新密码不一致");
    return;
  }

  const { oldPassword, password } = resetPassFormData.value;

  const { ok, message } = await updatePassword({
    oldPassword,
    password,
  });
  if (ok) {
    ElMessage.success(message);
  }

  // 清空
  const timer = setTimeout(() => {
    fyResetPassFormRef.value?.clear();
    clearTimeout(timer);
  }, 600);
};
</script>

<style scoped lang="scss">
.fy-my-tabs {
  :deep(.el-tabs__content) {
    padding: 20px;
    background-color: var(--el-color-info-light-9);
    border-radius: var(--el-border-radius-small);
  }
}
</style>
